<template>
	<view class="container">
		<!-- 状态栏 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<image src="/static/icons/back.png" mode="aspectFit" class="back-icon"></image>
			</view>
			<view class="nav-title">每日签到</view>
		</view>
		
		<!-- 签到卡片 -->
		<view class="sign-card">
			<view class="sign-header">
				<text class="sign-title">每日签到</text>
				<text class="sign-desc">点击签到领金币</text>
			</view>
			
			<!-- 签到按钮 -->
			<button 
				class="sign-btn" 
				:class="{ 'disabled': isSigned }"
				:disabled="isSigned" 
				@click="handleSign"
			>
				<text class="btn-text">{{isSigned ? '已签到' : '立即签到'}}</text>
			</button>
		</view>

		<!-- 签到成功弹窗 -->
		<uni-popup ref="signPopup" type="center" :mask-click="false">
			<view class="popup-content">
				<image src="/static/icons/success.png" mode="aspectFit" class="success-icon"></image>
				<view class="popup-title">签到成功</view>
				<view class="reward-info">
					<text class="reward-text">获得奖励</text>
					<text class="reward-amount">{{todayReward}}金币</text>
				</view>
				<view class="sign-calendar">
					<view 
						v-for="(item, index) in signList" 
						:key="index"
						class="calendar-item"
						:class="{ 'signed': item.signed, 'current': index === continuousDays }"
					>
						<view class="day-box">
							<text class="day-text">第{{index + 1}}天</text>
							<text class="reward-text">{{item.reward}}金币</text>
						</view>
						<image 
							v-if="item.signed" 
							src="/static/icons/signed.png" 
							mode="aspectFit" 
							class="signed-icon"
						></image>
					</view>
				</view>
				<button class="confirm-btn" @click="closePopup">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f8f9fa;
}

.status-bar {
	background: #FF6B6B;
}

.nav-bar {
	display: flex;
	align-items: center;
	height: 44px;
	background: #FF6B6B;
	padding: 0 15px;
}

.nav-left {
	width: 40px;
	height: 100%;
	display: flex;
	align-items: center;
}

.back-icon {
	width: 20px;
	height: 20px;
	filter: brightness(0) invert(1);
}

.nav-title {
	flex: 1;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
}

.sign-card {
	margin: 20px;
	background-color: #ffffff;
	border-radius: 16px;
	padding: 30px 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	text-align: center;
}

.sign-header {
	margin-bottom: 30px;
	
	.sign-title {
		font-size: 24px;
		font-weight: bold;
		color: #333333;
		display: block;
		margin-bottom: 8px;
	}
	
	.sign-desc {
		font-size: 14px;
		color: #666666;
	}
}

.sign-btn {
	width: 200px;
	height: 44px;
	line-height: 44px;
	background: #FF6B6B;
	color: #ffffff;
	border-radius: 22px;
	font-size: 16px;
	
	&.disabled {
		background: #cccccc;
	}
}

.popup-content {
	width: 300px;
	background-color: #ffffff;
	border-radius: 16px;
	padding: 30px 20px;
	text-align: center;
}

.success-icon {
	width: 64px;
	height: 64px;
	margin-bottom: 20px;
}

.popup-title {
	font-size: 24px;
	font-weight: bold;
	color: #333333;
	margin-bottom: 30px;
}

.reward-info {
	margin-bottom: 30px;
	
	.reward-text {
		font-size: 14px;
		color: #666666;
		margin-bottom: 10px;
	}
	
	.reward-amount {
		font-size: 32px;
		font-weight: bold;
		color: #FF6B6B;
	}
}

.sign-calendar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 30px 0;
}

.calendar-item {
	position: relative;
	flex: 1;
	min-width: 80px;
	background-color: #f8f9fa;
	border-radius: 12px;
	padding: 12px;
	
	&.signed {
		background-color: #fff2f2;
		
		.day-box {
			opacity: 0.6;
		}
	}
	
	&.current {
		background-color: #FF6B6B;
		
		.day-text, .reward-text {
			color: #ffffff;
		}
	}
	
	.day-box {
		text-align: center;
	}
	
	.day-text {
		font-size: 12px;
		color: #666666;
		display: block;
		margin-bottom: 4px;
	}
	
	.reward-text {
		font-size: 16px;
		font-weight: 500;
		color: #FF6B6B;
		display: block;
	}
	
	.signed-icon {
		position: absolute;
		top: -6px;
		right: -6px;
		width: 24px;
		height: 24px;
	}
}

.confirm-btn {
	width: 100%;
	height: 44px;
	line-height: 44px;
	background: #FF6B6B;
	color: #ffffff;
	border-radius: 22px;
	font-size: 16px;
	
	&:active {
		opacity: 0.9;
	}
}
</style>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			isSigned: false,
			continuousDays: 0,
			todayReward: 0,
			signList: [
				{ reward: 10, signed: false },
				{ reward: 20, signed: false },
				{ reward: 30, signed: false },
				{ reward: 40, signed: false },
				{ reward: 50, signed: false },
				{ reward: 60, signed: false },
				{ reward: 100, signed: false }
			]
		}
	},
	onLoad() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		this.loadSignData();
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		// 加载签到数据
		loadSignData() {
			// TODO: 从服务器获取签到数据
			this.continuousDays = 3;
			this.signList.forEach((item, index) => {
				if (index < this.continuousDays) {
					item.signed = true;
				}
			});
		},
		
		// 处理签到
		handleSign() {
			if (this.isSigned) return;
			
			// TODO: 调用签到接口
			this.todayReward = this.signList[this.continuousDays].reward;
			this.signList[this.continuousDays].signed = true;
			this.continuousDays++;
			this.isSigned = true;
			
			// 显示签到成功弹窗
			this.$refs.signPopup.open();
		},
		
		// 关闭弹窗
		closePopup() {
			this.$refs.signPopup.close();
		}
	}
}
</script> 